<template>
  <div class="index-box">
    <el-row :gutter="0" type="flex" align="top">
      <el-col class="samehlp" :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <el-row :gutter="0">
          <el-col v-for="item in list" :key="item.id" class="shadow-box rightf" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-row :gutter="0" type="flex" align="middle">
              <el-col class="overhdbox" :xs="8" :sm="10" :md="10" :lg="8" :xl="8">
                <nuxt-link :to="'/list/'+item.id">
                  <el-image :src="item.image">
                    <div slot="placeholder" class="image-slot">
                      加载中
                      <span class="dot">...</span>
                    </div>
                  </el-image>
                </nuxt-link>
              </el-col>
              <el-col :xs="16" :sm="14" :md="14" :lg="16" :xl="16">
                <div class="descbox">
                  <div class="mptitle">{{item.typeName}}</div>
                  <div class="mptext mpline85 hidden-sm-and-down">
                    <nuxt-link :to="'/list/'+item.id">{{item.description}}</nuxt-link>
                  </div>
                  <div class="mpviewmenu mpline40">
                    <i class="color1 el-icon-view" />
                    <span class="color2">125311</span>人
                    <nuxt-link :to="'/list/'+item.id">
                    <el-button class="btsm bcolor1">
                      学习
                      <i class="el-icon-caret-right el-icon--right"></i>
                    </el-button>
                    </nuxt-link>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>

        </el-row>
      </el-col>
      <el-col class="samehl hidden-sm-and-down" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <div class="rightline-box">
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(m,index) in menus" :key="m.id" :title="m.title" :name="''+(index+1)">
              <el-card class="box-card">
                <div v-for="(mc,mcindex) in m.skills" :key="mc.id" class="indexms">
                  <nuxt-link to="/">
                    <div class="menutitle"><span :class="'number'+mcindex">{{mcindex+1}}. </span>{{mc.name}}</div>
                    <div class="menutitlecount"><i class="mtc color1 el-icon-view" />{{mc.view}}人</div>
                  </nuxt-link>
                </div>
              </el-card>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
    };
  },
  async asyncData({app}) {
    //查询所有课程分类
    const courseResult = await app.$axios.$get('/resource/type/list')
    //查询所有面试列表
    const skillResult = await app.$axios.$get('/question/menus')

    return {list:courseResult,menus:skillResult}
  }
};
</script>